<template>
    <!-- 弹窗添加链接 -->
    <el-dialog v-model="modifyClassifyDialogFormVisible" title="编辑分类信息" width="400px" center
        @close="modifyClassifyCloseDialog(false,)">
        <el-form :model="classifyInfo" label-width="100px">
            <el-form-item label="分类名称：">
                <el-input v-model="classifyInfo.classifyName" placeholder="请输入分类名称" />
            </el-form-item>
            <el-form-item label="分类介绍：">
                <el-input v-model="classifyInfo.classifyIntroduce" placeholder="请输入分类介绍" />
            </el-form-item>
            <el-form-item label="颜色1：" style="width: 100%;">
                <el-color-picker v-model="classifyInfo.color1" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="颜色2：" style="width: 100%;">
                <el-color-picker v-model="classifyInfo.color2" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="合成渐变：" style="width: 100%;">
                <div v-if="classifyInfo.color1 !== '' && classifyInfo.color2 !== ''"
                    :style="'background:linear-gradient(to right,' + classifyInfo.color1 + ',' + classifyInfo.color2 + ')'"
                    style="width: 100%;height:25px;margin: 0 auto;">
                </div>
                <span v-if="classifyInfo.color1 === '' && classifyInfo.color2 === ''">
                    未选择颜色
                </span>
                <div v-if="classifyInfo.color1 !== '' && classifyInfo.color2 === ''"
                    :style="'background:' + classifyInfo.color1" style="width: 100%;height:25px;margin: 0 auto;">
                </div>
                <div v-if="classifyInfo.color1 === '' && classifyInfo.color2 !== ''"
                    :style="'background:' + classifyInfo.color2" style="width: 100%;height:25px;margin: 0 auto;">
                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="modifyClassifyCloseDialog(false)">取消</el-button>
                <el-button plain color="#2fa7b9" @click="submit" @keyup.enter="submit">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import {
    reactive,
    toRefs,
    onUpdated,
    watch
} from 'vue'

import {
    ElMessage,
    ElNotification,
} from 'element-plus'

import { EditReactive, ClassifyInfo } from "@/types/classify";

import { UpdateClassify } from '@/api/backstage/index'

type Props = {
    modifyClassifyDialogFormVisible?: boolean,
    classifyInfo?: any,
}
const props = withDefaults(defineProps<Props>(), {
    modifyClassifyDialogFormVisible: false,
    classifyInfo: {},
})
const emit = defineEmits(['onModifyClassifyCloseDialog'])
//数据更新后调用
watch(() => [props.modifyClassifyDialogFormVisible, props.classifyInfo], (newval, oldval) => {
    state.modifyClassifyDialogFormVisible = JSON.parse(JSON.stringify(newval[0]))
    state.classifyInfo = JSON.parse(JSON.stringify(newval[1]))
})

const state = reactive<EditReactive>({
    // 弹窗状态
    modifyClassifyDialogFormVisible: props.modifyClassifyDialogFormVisible,
    // 当前编辑的用户信息
    classifyInfo: {} as ClassifyInfo,
    // 表单信息
    form: {
        classifyName: '',
        color1: '',
        color2: '',
        classifyIntroduce: '',
    },
})
const { modifyClassifyDialogFormVisible, classifyInfo, form } = toRefs(state)
// 取消
const modifyClassifyCloseDialog = (visible: boolean) => {
    // 关闭窗口
    emit("onModifyClassifyCloseDialog", visible);
};

// 提交修改
const submit = () => {
    if (state.classifyInfo.classifyName !== '' &&
        state.classifyInfo.color1 !== '' &&
        state.classifyInfo.color2 !== '' &&
        state.classifyInfo.classifyIntroduce !== '') {
        // 修改分类信息
        const params = {
            classifyId: state.classifyInfo.classifyId,
            classifyName: state.classifyInfo.classifyName,
            color1: state.classifyInfo.color1,
            color2: state.classifyInfo.color2,
            classifyIntroduce: state.classifyInfo.classifyIntroduce
        }
        UpdateClassify(params).then((res) => {
            if (res.code == 0) {
                emit("onModifyClassifyCloseDialog", false, res.data);
                ElNotification({
                    title: '提示',
                    message: "分类信息修改成功~",
                    type: 'success',
                })
            }
        })
    } else {
        ElMessage({
            showClose: true,
            message: '请填写（选择）提供的所有选项，不能为空',
            type: 'error',
        })
    }
}
</script>
<style scoped>
.el-button--text {
    margin-right: 15px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.el-select {
    width: 100%;
}

:global(.el-dialog__title) {
    color: #2fa7b9 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

:deep(.el-upload-dragger) {
    padding: 0px !important;
    width: 100%;
    height: 130px;
}

:global(.el-dialog__body) {
    padding: 25px calc(var(--el-dialog-padding-primary) + 5px) 0px !important;
}

:deep(.el-color-picker) {
    width: 100%;
}

:deep(.el-color-picker__trigge)r {
    width: 100%;
}
</style>